<template>
  <a-modal
    :open="visible"
    title="确认订单"
    @ok="handleOk"
    @cancel="handleCancel"
    okText="提交订单"
    cancelText="返回购物车"
    class="checkout-modal"
  >
    <h3>订单商品</h3>
    <a-list :data-source="selectedItems">
      <template #renderItem="{ item }">
        <a-list-item>
          <a-list-item-meta
            :title="item.name"
            :description="`${item.specs} x ${item.quantity}`"
          >
            <template #avatar>
              <img :src="item.image" alt="商品图片" style="width: 50px; height: 50px; object-fit: cover;"/>
            </template>
          </a-list-item-meta>
          <div>¥{{ (item.price * item.quantity).toFixed(2) }}</div>
        </a-list-item>
      </template>
    </a-list>
    
    <a-divider/>
    
    <h3>收货地址</h3>
    <a-radio-group v-model:value="selectedAddressId">
      <a-radio
        v-for="address in addresses"
        :key="address.id"
        :value="address.id"
        style="display: block; margin-bottom: 8px;"
      >
        <div>
          <span>{{ address.name }}</span>
          <span style="margin-left: 8px;">{{ address.phone }}</span>
          <a-tag v-if="address.isDefault" color="blue">默认</a-tag>
        </div>
        <div style="color: #999;">
          {{ address.province }} {{ address.city }} {{ address.district }} {{ address.detail }}
        </div>
      </a-radio>
    </a-radio-group>
    
    <a-divider/>
    
    <h3>支付方式</h3>
    <a-radio-group v-model:value="paymentMethod">
      <a-radio value="alipay">支付宝</a-radio>
      <a-radio value="wechat">微信支付</a-radio>
      <a-radio value="creditcard">信用卡</a-radio>
    </a-radio-group>
    
    <a-divider/>
    
    <div class="order-summary">
      <div class="summary-row">
        <span>商品金额：</span>
        <span>¥{{ totalPrice }}</span>
      </div>
      <div class="summary-row">
        <span>配送费：</span>
        <span>¥{{ shippingFee.toFixed(2) }}</span>
      </div>
      <div class="summary-row">
        <span>优惠：</span>
        <span>-¥{{ discount.toFixed(2) }}</span>
      </div>
      <div class="summary-row total">
        <span>订单总计：</span>
        <span>¥{{ (parseFloat(totalPrice) + shippingFee - discount).toFixed(2) }}</span>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, computed } from 'vue';
import { message } from 'ant-design-vue';

const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  selectedItems: {
    type: Array,
    required: true
  },
  addresses: {
    type: Array,
    required: true
  }
});

const emit = defineEmits(['update:visible', 'confirm']);

// 结算相关状态
const selectedAddressId = ref(1); // 默认选择第一个地址
const paymentMethod = ref('alipay');
const shippingFee = ref(10.00); // 运费
const discount = ref(20.00); // 优惠金额

// 总价计算
const totalPrice = computed(() => {
  try {
    const total = props.selectedItems
      .filter(item => item && item.price && item.quantity)
      .reduce((sum, item) => {
        const price = Number(item.price) || 0;
        const quantity = Number(item.quantity) || 0;
        return sum + (price * quantity);
      }, 0);
    
    return total.toFixed(2);
  } catch (error) {
    console.error('计算总价出错:', error);
    return '0.00';
  }
});

// 处理取消
const handleCancel = () => {
  emit('update:visible', false);
};

// 处理确认订单
const handleOk = () => {
  const selectedAddress = props.addresses.find(addr => addr.id === selectedAddressId.value);
  if (!selectedAddress) {
    message.error('请选择收货地址');
    return;
  }
  
  emit('confirm', {
    addressId: selectedAddressId.value,
    paymentMethod: paymentMethod.value,
    totalAmount: parseFloat(totalPrice.value) + shippingFee.value - discount.value
  });
  
  emit('update:visible', false);
};
</script>

<style scoped>
.order-summary {
  background-color: #f9f9f9;
  padding: 16px;
  border-radius: 4px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.summary-row.total {
  font-size: 18px;
  font-weight: bold;
  color: #ff4d4f;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #ddd;
}

/* 响应式布局 - 1280px断点 */
@media (max-width: 1280px) {
  :deep(.checkout-modal .ant-modal) {
    max-width: 90%;
    margin: 0 auto;
  }

  :deep(.checkout-modal .ant-modal-content) {
    padding: 16px;
  }

  :deep(.checkout-modal .ant-modal-body) {
    padding: 16px 0;
  }
}
</style> 